import {createRouter, createWebHistory} from 'vue-router'

//1.定义路由表
const routes =
    [
        {
            path: '/',
            // 访问别名也可以访问path
            alias: ["/home", "/index"],
            component: () => import('@/view/layout/index.vue'),
        },
        {
            path: '/formSubmit',
            component: () => import("@/view/layout/components/formSubmit.vue")
        },
        {
            path: '/father',
            component: () => import("@/view/layout/components/Father.vue")
        },
        {
            path: '/fileUpload',
            component: () => import("@/view/fileUpload/index.vue")
        },
        {
            path: '/fileUploadSingle',
            component: () => import("@/view/fileUpload/uploadSingle.vue")
        },
        {
            path: '/uploadMutiple',
            component: () => import("@/view/fileUpload/uploadMutiple.vue")
        },
        {
            path: '/uploadBigFile',
            component: () => import("@/view/fileUpload/uploadBigFile.vue")
        },
        {
            path: '/content',
            component: () => import("@/view/layout/components/Content.vue")
        },
        {

            //   /user/001/name/小明
            // 参数后面加问号就不是必须的了 /user/001/name/,但是后面的/name必须加上
            path: '/user/:id/name/:name?',
            name: 'member',
            component: () => import("@/view/layout/components/user.vue")
        },
        {

            // 进入vip.vue页面，使用router-view,就行iframe一样显示子页面
            // 而组件是共享的
            path: '/vip',//http://localhost:5173/vip
            component: () => import("@/view/vip.vue"),
            // children前面不能加/
            children: [
                {
                    path: '',//http://localhost:5173/vip
                    component: () => import("@/view/vip/default.vue")
                },
                {
                    path: 'order',//http://localhost:5173/vip/order
                    component: () => import("@/view/vip/order.vue")
                },
                {
                    path: 'info',//http://localhost:5173/vip/info
                    component: () => import("@/view/vip/info.vue")
                },
            ]
        },
        {


            path: '/svip',//
            // redirect:'/vip' //访问http://localhost:5173/svip会变成访问 http://localhost:5173/vip
            //redirect:{path:'/content',query:{id:100,title:'阿斯顿11'}} //会变成访问http://localhost:5173/content?id=100&title=阿斯顿11
            redirect: {name: 'member', params: {name: '小明啊啊啊啊', id: 2222234}} //会变成访问 http://localhost:5173/user/2222234/name/小明啊啊啊啊
        }
    ]


//2.创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes
})

//3.导出路由器
export default router

//4.main.js里面让vue使用路由器

//5.可以使用router了，使用router-link代替超链接,router-view动态展示子路由